<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>计算属性</p>
    <!-- 解耦 -->
    <!-- 计算属性：用来做计算的一个属性 -->
    <p>
      依赖缓存：当计算所依赖的数据没有变化时，计算属性会将结果缓存起来，下次使用时直接获取，而不是重新计算。
    </p>
    <p>
      计算属性 vs 侦听：
      1.watch会修改原数据，computed不会修改数据；
      2.watch是一对多；computed是多对一。
    </p>
    <p>
      计算属性 vs 方法：
      1.computed会有缓存，methods没有缓存；
      2.computed依赖缓存，性能比较好。反复使用一个经过大量计算的数据时，使用computed；
      3.methods调用几次就执行几次，computed无论调用几次，都只执行一次。
    </p>
    <p>{{reverseStr}}</p>
    <p>{{reverseStrFn()}}</p>
    <hr>
    <p>购物车</p>
    <ul>
      <li v-for="(item, index) in cart">
        <span>名称：{{item.name}}</span>
        <span>单价：{{item.price}}</span>
        <span>数量：{{item.num}}</span>
        <span>小计：{{item.num * item.price}}</span>
      </li>
      <li>
        总价：{{totalPrice}}
      </li>
      <li>
        总价：{{totalPrice}}
      </li>
      <li>
        总价：{{totalPrice}}
      </li>
      <li>
        总价：{{totalPriceFn()}}
      </li>
      <li>
        总价：{{totalPriceFn()}}
      </li>
      <li>
        总价：{{totalPriceFn()}}
      </li>
    </ul>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        str: 'hello',
        person: {
          age: 18
        },
        cart: [
          {name: '手机', price: 4000, num: 2},
          {name: '电脑', price: 5000, num: 1},
          {name: '平板', price: 2000, num: 1}
        ]
      },
      computed: {
        reverseStr() {
          return this.str.split('').reverse().join('');
        },
        totalPrice() {
          console.log('computed');
          let num = 0;
          this.cart.forEach(item  => {
            num += item.price * item.num;
          });
          return num
        }
      },
      methods: {
        reverseStrFn() {
          return this.str.split('').reverse().join('');
        },
        totalPriceFn() {
          console.log('fn');
          let num = 0;
          this.cart.forEach(item  => {
            num += item.price * item.num;
          });
          return num
        }
      },
    })
  </script>
</body>
</html>